<template>
  <div>
    <div class="footer-container">
      <div class="footer-nav">
        <el-row :gutter="20" class="footer-content">
          <el-col :span="4">
            <div class="grid-content bg-purple">购物指南</div>
            <div class="footer-items">
              <ul>
                <li><a href="javascript:;">购物流程</a></li>
                <li><a href="javascript:;">会员介绍</a></li>
                <li><a href="javascript:;">生活旅游/团购</a></li>
                <li><a href="javascript:;">常见问题</a></li>
                <li><a href="javascript:;">大家电</a></li>
                <li><a href="javascript:;">联系客服</a></li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">配送方式</div>
            <div class="footer-items">
              <ul>
                <li><a href="javascript:;">上门自提</a></li>
                <li><a href="javascript:;">211现时达</a></li>
                <li><a href="javascript:;">配送服务咨询</a></li>
                <li><a href="javascript:;">配送费收费标准</a></li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">支付方式</div>
            <div class="footer-items">
              <ul>
                <li><a href="javascript:;">货到付款</a></li>
                <li><a href="javascript:;">在线支付</a></li>
                <li><a href="javascript:;">分期付款</a></li>
                <li><a href="javascript:;">公司转账</a></li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">售后服务</div>
            <div class="footer-items">
              <ul>
                <li><a href="javascript:;">售后政策</a></li>
                <li><a href="javascript:;">价格保护</a></li>
                <li><a href="javascript:;">退款说明</a></li>
                <li><a href="javascript:;">返修/退换货</a></li>
                <li><a href="javascript:;">取消订单</a></li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">特色服务</div>
            <div class="footer-items">
              <ul>
                <li><a href="javascript:;">DIY装机</a></li>
                <li><a href="javascript:;">延保服务</a></li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}

/* footer 总盒子 */
.footer-container {
  width: 100%;
  height: 400px;
  background-color: #545c64;
}

/* footer 盒子导航栏 */
.footer-container .footer-nav {
  width: 88rem;
  margin: auto;
  padding-top: 40px;
}

.footer-container .footer-nav .footer-content {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-around;
  text-align: center;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #dfe0df;
  text-align: center;
  line-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/* footer 盒子内容 */
.footer-container .footer-nav .footer-content .footer-items ul li a {
  color: #dfe0df;
  font-size: 12px;
}

.footer-container .footer-nav .footer-content .footer-items ul li a:hover {
  color: #ffa500;
}
</style>
